<template>
    <view class="pr-30 pl-30">
        <view style="height: 6rpx"></view>
        <view
            class="list br-24 mt-24 pl-30 pr-30 ft-28 pb-16"
            v-for="item in list"
            :key="item.orderNo"
            :class="[[6, 7, 31].includes(item.orderStatus) ? 'gray' : '']"
            @click="goDetail(item)"
        >
            <view v-if="item.orderType === 3" class="renewal">
                <hj-image src="xu-01.png" height="110rpx" width="110rpx" mode="aspectFit" />
            </view>
            <view class="align-center pt-24 pb-12 ft-32 t-3">
                <view class="img mr-10">
                    <hj-image src="icons-32.png" height="36rpx" width="36rpx" mode="aspectFit" />
                </view>
                <view class="flex-auto text-over-1">{{ item.addressName || '懿家酒店' }}</view>
            </view>
            <view class="mt-4 ft-36 bold t-3">{{ item.nameZh || ' ' }}</view>
            <view class="mt-12 t-6 flex">
                订单编号：<view class="flex-auto flex"
                    ><text>{{ item.orderNo || '-' }}</text>
                </view>
            </view>
            <view class="mt-8 t-6">
                <text>
                    {{ formatTime(item.checkInDate) }} - {{ formatTime(item.checkOutDate) }}</text
                >
                <text class="ml-10" v-if="item.nights"> {{ item.nights }}晚</text>
                <text v-if="item.roomCount">{{ item.roomCount }}间 </text>
            </view>
            <view class="mt-8 t-6 flex">
                {{ [1, 6].includes(item.orderStatus) ? '订单金额' : '在线支付' }}：<view
                    class="flex-auto flex"
                    ><text>{{ item.payAmount || 0 }}元</text>
                </view>
            </view>
            <view class="mt-8 t-6 flex">
                订单状态：
                <view class="flex-auto flex">
                    <text :class="[[1].includes(item.orderStatus) ? 'c-m' : '']">
                        {{ statusText[item.orderStatus] || '' }}
                    </text>
                    <text
                        v-if="item.applyStatus && ![5, 6, 7].includes(item.orderStatus)"
                        class="c-m"
                    >
                        ({{ editDateStatusText[item.applyStatus] }})
                    </text>
                    <view
                        v-if="item.orderStatus === 1 && getExpectCancelTime(item) > 0"
                        class="ml-10 align-center c-m"
                    >
                        (<up-count-down
                            :time="getExpectCancelTime(item)"
                            format="mm:ss"
                            @finish="finishOrder(item)"
                        ></up-count-down
                        >)
                    </view>
                </view>
            </view>
            <view class="mt-8 t-6" v-if="[1, 2].includes(item.orderStatus)">
                取消政策：
                <text>
                    入住当天{{
                        formatDate(item.freeCancelHours, '20:00')
                    }}前可免费取消，过时取消需申请等待酒店处理。
                </text>
                <!-- 续订订单18:00前免费取消 -->
            </view>
            <view class="flex-end align-center but mt-20">
                <!--  && getCancelButShow(item) 方法规则:判断是否过了入住日期第二天的早上八点，如果过了则不显示取消按钮 -->
                <view
                    class="but-item"
                    :class="[[1, 4].includes(item.applyStatus) ? 'disabled' : '']"
                    v-if="
                        ([1, 2, 3].includes(item.orderStatus) ||
                            ([5].includes(item.orderStatus) && !item.checkInTime)) &&
                        ![1, 4].includes(item.applyStatus)
                    "
                    @click.stop="cancelOrder(item)"
                    >取消订单</view
                >
                <view
                    class="but-item but1"
                    v-if="[1].includes(item.orderStatus)"
                    @click.stop="plyOrder(item)"
                    >立即支付</view
                >
                <view
                    class="but-item but5"
                    :class="[[1].includes(item.applyStatus) ? 'disabled' : '']"
                    v-if="[3, 4].includes(item.orderStatus)"
                    @click.stop="editOrder(item)"
                    >修改订单</view
                >
                <view
                    class="but-item but2"
                    v-if="[2, 3].includes(item.orderStatus)"
                    @click.stop="goPilot(item)"
                    >导航到店</view
                >
                <view
                    class="but-item but3"
                    v-if="[5].includes(item.orderStatus)"
                    @click.stop="roomRenewal(item)"
                    >原房续订</view
                >
                <view
                    class="but-item"
                    v-if="[5].includes(item.orderStatus)"
                    @click.stop="goInvoice(item)"
                    >{{ item.isInvoice ? '查看发票' : '开具发票' }}</view
                >
                <view
                    class="but-item but4"
                    v-if="[4].includes(item.orderStatus)"
                    @click.stop="goContact(item)"
                    >联系客服</view
                >
            </view>
            <view class="mask br-24" v-if="[6, 7, 31].includes(item.orderStatus)"></view>
        </view>
        <view style="height: 30rpx"></view>
    </view>
</template>

<script setup>
/**
 * @description 订单页列表组件
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'OrderList'
})
const { list } = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

// 1: 提前退房申请中, 2: 提前退房申请成功, 3: 提前退房申请驳回, 4: 取消订单申请中, 5: 取消订单申请成功, 6: 取消订单申请驳回
const editDateStatusText = ref({
    1: '申请提前退房-等待处理',
    2: '申请提前退房-已通过',
    3: '申请提前退房-已拒绝',
    4: '取消订单申请-等待处理',
    5: '取消订单申请-已通过',
    6: '取消订单申请-已拒绝'
})
// 订单状态 1: 待支付, 2: 已支付待确认, 3: 已确认, 31: 已拒单, 4: 已入住, 5: 已完成, 6: 已取消, 7: 过时取消
const statusText = ref({
    1: '待付款',
    2: '等待酒店确认订单',
    3: '待入住',
    31: '酒店拒绝-已取消',
    4: '已入住',
    5: '已完成',
    6: '已取消',
    7: '过时取消' //已支付的超时取消订单
})
// 时间处理
const formatTime = time => {
    return dayjs(time).format('MM月DD日') || ''
}

// 计算列表中待支付的倒计时时间expectCancelTime字段距离当前时间的毫秒数
const getExpectCancelTime = data => {
    const time = Number(data.expectCancelTimeSeconds)
    return !time ? 0 : time
}

// 判断取消按钮是否过了显示时间 过时间则不显示
const getCancelButShow = data => {
    const time = data.checkInDate
    if (data.orderStatus === 3) {
        // 将 入住时间 转换为 dayjs 对象，并后延一天，设置时间为早上 8 点
        const targetTime = dayjs(time).add(1, 'day').hour(8).minute(0).second(0).millisecond(0)
        // 获取当前时间
        const currentTime = dayjs()
        // 判断当前时间是否超过目标时间
        return currentTime.isAfter(targetTime) ? false : true
    }
    return true
}

const emit = defineEmits(['cancelOrder', 'plyOrder', 'editOrder', 'finishOrder'])
const cancelOrder = data => {
    if (data.applyStatus && [4].includes(data.applyStatus)) return
    emit('cancelOrder', data)
}
const plyOrder = data => {
    emit('plyOrder', data)
}
const editOrder = data => {
    if (data.applyStatus && [1].includes(data.applyStatus)) return
    emit('editOrder', data)
}
// 原房续订 跳转到续订页面
const roomRenewal = data => {
    uni.navigateTo({
        url: `/pages/order/room-renewal/index?orderNo=${data.orderNo}`
    })
}

const finishOrder = data => {
    emit('finishOrder', data)
}

// 订单详情
const goDetail = data => {
    uni.navigateTo({
        url: `/pages/order/order-details/index?orderNo=${data.orderNo}`
    })
}
// 开具发票 如果开具了 则查看发票 携带发票ID即可
const goInvoice = data => {
    const type = data.isInvoice ? 'detail' : 'apply'
    uni.navigateTo({
        url: `/pages/user/invoice-apply/index?orderNo=${data.orderNo}&type=${type}&amount=${data.payAmount}`
    })
}
// 联系客服
const goContact = data => {
    uni.showModal({
        title: '联系客服',
        content: '是否拨打客服电话？',
        success: res => {
            if (res.confirm) {
                uni.makePhoneCall({
                    phoneNumber: data.phone || '',
                    fail: e => {
                        console.error('联系客服失败：', e)
                    }
                })
            }
        }
    })
}
// 打开内置地图 注意经纬度不能是字符串
const goPilot = data => {
    if (!data.latitude || !data.longitude) {
        return
    }
    let name = `${data.hotelName}${data.addressName ? '(' + data.addressName + ')' : ''}`
    uni.openLocation({
        longitude: data.longitude,
        latitude: data.latitude,
        name: name,
        address: data.addressZh,
        fail: e => {
            console.error('地图打开失败：', e)
        }
    })
}
// 时间格式处理
const formatDate = (date, defaultDate) => {
    if (!date) {
        return defaultDate
    }
    try {
        const today = dayjs().format('YYYY-MM-DD')
        return dayjs(`${today} ${date}`).format('HH:mm')
    } catch (e) {
        console.error('时间格式转换失败:', e)
        return defaultDate
    }
}
</script>

<style scoped lang="scss">
.list {
    background: $uni-bg-color;
    box-shadow: 0 0 16rpx 0 rgba($color: #000000, $alpha: 0.08);
    position: relative;
    .renewal {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
    }
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.07);
        z-index: 10;
    }
    .but {
        &-item {
            height: 64rpx;
            border: 1px solid #d8d8d8;
            border-radius: 8rpx;
            margin-left: 16rpx;
            padding: 0 22rpx;
            display: flex;
            align-items: center;
            line-height: 1;
            color: #888888;
            margin-bottom: 12rpx;
        }
        .but1 {
            border-color: $uni-color-error;
            background: $uni-color-error;
            color: $uni-bg-color;
        }
        .but2 {
            border-color: $uni-color-main;
            background: $uni-color-main;
            color: $uni-bg-color;
        }
        .but3 {
            border-color: $uni-color-primary;
            background: $uni-color-primary;
            color: $uni-bg-color;
        }
        .but4 {
            border-color: $uni-color-primary;
            color: $uni-color-primary;
        }
        .but5 {
            border-color: #50ad54;
            color: #50ad54;
        }
        .disabled {
            color: #ccc;
            border-color: #e9e9e9;
        }
    }
}
.gray {
    color: #bbb;
    box-shadow: none;
    view,
    text {
        color: #bbb;
    }
}
</style>
